<%@ page import="com.dingpeikeji.quickdeer.core.modules.orders.entity.TOrders" contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@include file="/WEB-INF/views/include/constrant.jsp" %>
<c:if test="${orders.ordertype ne ORDER_TYPE_REALSCHE_SELF_TRAVEL}" >
	<c:set var="title" value="车辆" />
</c:if>
<c:if test="${orders.ordertype eq ORDER_TYPE_REALSCHE_SELF_TRAVEL}" >
	<c:set var="title" value="座位" />
</c:if>
<html>
<head>
<title>支付方式</title>
<link href="${ctxStatic }/xiake/css/list.css" rel='stylesheet'type='text/css' />
<link href="${ctxStatic }/xiake/css/style.css" rel='stylesheet'type='text/css' />
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#offline").click(function(){
			$("#remark").show();
		});
		$("#zfb").click(function(){
			$("#remark").hide();
		});
		$("#wx").click(function(){
			$("#remark").hide();
		});
	})
</script>
</head>
<body>
	<input type="hidden" id="menuInfo" value="${orders.ordertype }">
	<div class="container">
		<form id="payForm" action="${ctx}/pay/pay" method="get" target="_blank">
			<input type="hidden" name="orderid" value="${orders.orderid }"/>
			<input type="hidden" name="ordertype" value="${orders.ordertype }"/>
			<input type="hidden" name="demandsid" value="${param.demandsid}"/>
			<input type="hidden" name="orderRemarks" value="${param.orderRemarks}"/>
			<div class="container_date font_normal_size textcen">
				<c:if test="${empty minutes }">
					订单支付超时，请重新预定！
				</c:if>
				<c:if test="${not empty minutes }">
					${title }已锁定，请在30分钟内进行支付，完成网上包车<%-- ，支付剩余时间<span class="color_red" id="leftTimeShow">${minutes }分${seconds }秒 </span>--%>
					<!-- <script type="text/javascript">
						// 锁定倒计时
						var minutes = ${minutes};
						var seconds = ${seconds};
						var se = window.setInterval("leftTimeShow()",1000);
						function leftTimeShow(){
							$('#leftTimeShow').text(minutes+'分'+seconds+'秒');
							seconds--;
							if(seconds <= 0) {
								minutes--;
								seconds = 59;
							}
							if(minutes <= 0) {
								clearInterval(se);
							}
						}
					</script> -->
				</c:if>
			</div>
			<div class="container_information font_normal_size">
				<div>
					<label class="font_large_size">订单信息&nbsp;</label>
				</div>
				<div>
					<label>订单名称:</label>
					<span>${orders.ordername }</span>
				</div>
				<div>
					<label>订车人姓名:</label>
					<span>${orders.contacts }</span>
				</div>
				<div>
					<label>联系人电话:</label>
					<span>${orders.payertel }</span>
				</div>
				<div>
					<label>出发时间:</label>
					<span><fmt:formatDate value="${orders.departdate }" pattern="yyyy-MM-dd HH:mm:ss"/></span>
				</div>
				<c:if test="${orders.ordertype ne ORDER_TYPE_REALSCHE_SELF_TRAVEL and orders.ordertype ne ORDER_TYPE_RENTPRODUCT_AIRPLANE and orders.ordertype ne ORDER_TYPE_RENTPRODUCT_TRAIN }">
					<div>
						<label>包车天数:</label>
						<span>${orders.bookingdays }天</span>
					</div>
				</c:if>
				<div>
					<label>车辆数:</label>
					<span>${orders.purchasenum }辆</span>
				</div>
				<div>
					<label>车型:</label>
					<span>${orders.cartype.typename }<c:if test="${not empty react }">（${react.remarks }）</c:if></span>
				</div>
				<div>
					<label>品牌:</label>
					<span>${orders.cartype.typedesc }</span>
				</div>
				<c:if test="${orders.ordertype eq ORDER_TYPE_RENTPRODUCT_AIRPLANE}">
					<c:set var="boardName" value="接送机地点"></c:set>
				</c:if>
				<c:if test="${orders.ordertype eq ORDER_TYPE_RENTPRODUCT_TRAIN}">
					<c:set var="boardName" value="接送火车地点"></c:set>
				</c:if>
				<div>
					<label>${not empty boardName?boardName:'上车地点' }:</label>
					<span>${orders.boardaddr }</span>
				</div>
				<%-- <c:if test="${orders.ordertype eq ORDER_TYPE_RENTPRODUCT_AIRPLANE or orders.ordertype eq ORDER_TYPE_RENTPRODUCT_TRAIN }">
					<div>
						<label>下车地点:</label>
						<span>${orders.offaddrs }</span>
					</div>
				</c:if> --%>
				<div>
					<label>行程备注:</label>
					<span>${orders.remarks }</span>
				</div>
			</div>
			<div class="container_choice  font_normal_size">
				<div class="container_choice_line">
					<label>需支付:</label>
					<span>￥${orders.dueamount }</span>
				</div>
				<div class="container_choice_line">
					<label>支付方式:</label>
					<input type="radio" name="payway" value="${TORDERS_PAY_WAY_ALIPAY }" id="zfb" checked>&nbsp;&nbsp;支付宝&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="payway" value="${TORDERS_PAY_WAY_WXPAY }" id="wx">&nbsp;&nbsp;微信支付
					<input type="radio" name="payway" value="1" id="offline">&nbsp;&nbsp;线下支付&nbsp;&nbsp;
					备注:<input type="text" name="orderRemarks" style="width: 300px;height: 30px;display:none" id="remark"/>
				</div>
			</div>
			<div class="container_sorder font_normal_size">
				<c:if test="${empty minutes }">
					<div class="pointer">已作废</div>
				</c:if>
				<c:if test="${not empty minutes }">
					<div class="pointer container_sorder_zf"  id="ClickMe" onclick="$('#payForm').submit();">立即支付</div>
 					<c:if test="${orders.ordertype eq TORDERS_ORDER_TYPE_REALSCHE_SELF_TRAVEL}">
 					 	<div class="pointer container_sorder_zf" onclick="window.location.href='${ctxFront}/index?boardaddrfc=${boardaddrfc}&offaddrfc=${offaddrfc}&boardaddrNamefc=${boardaddrNamefc }&offaddrNamefc=${offaddrNamefc }'">购票返程</div>
						<c:set var="productType" value="realsche" />
					</c:if>
					<c:if test="${orders.ordertype eq TORDERS_ORDER_TYPE_RENTPRODUCT_DAY_BETWEEN or
						orders.ordertype eq TORDERS_ORDER_TYPE_RENTPRODUCT_DAY_IN or
						orders.ordertype eq TORDERS_ORDER_TYPE_RENTPRODUCT_TRAVEL_ONE or
						orders.ordertype eq TORDERS_ORDER_TYPE_RENTPRODUCT_TRAVEL_TWO}">
						<c:set var="productType" value="rentproduct" />
					</c:if>
					<%--  <a class="pointer container_sorder_zf" href="${ctx}/pay/cancel?orderid=${orders.orderid}">取消</a> --%>
				</c:if>
			</div>
			<div class="clear"></div>
		</form>
		<div id="goodcover"></div>
		<div id="code">
			<div class="close1">
				<a href="javascript:void(0)" id="closebt">
				<img src="${ctxStatic}/xiake/images/close_grey.png"></a>
			</div>
			<div class="goodtxt">
				<a href="${ctx }/rentproduct/demands/list">
					<div class="goodtxt-div">支付完成</div>
				</a> 
				<a href="${ctx }/rentproduct/demands/list">
					<div class="goodtxt-div">遇到问题</div>
				</a>
			</div>
		</div>
	</div>
	<script>
$(function() {
    //alert($(window).height());
    $('#ClickMe').click(function() {
        $('#code').center();
        $('#goodcover').show();
        $('#code').fadeIn();
    });
    $('#closebt').click(function() {
        $('#code').hide();
        $('#goodcover').hide();
    });
	$('#goodcover').click(function() {
        $('#code').hide();
        $('#goodcover').hide();
    });
    /*var val=$(window).height();
	var codeheight=$("#code").height();
    var topheight=(val-codeheight)/2;
	$('#code').css('top',topheight);*/
    jQuery.fn.center = function(loaded) {
        var obj = this;
        body_width = parseInt($(window).width());
        body_height = parseInt($(window).height());
        block_width = parseInt(obj.width());
        block_height = parseInt(obj.height());

        left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
        if (body_width < block_width) {
            left_position = 0 + $(window).scrollLeft();
        };

        top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
        if (body_height < block_height) {
            top_position = 0 + $(window).scrollTop();
        };

        if (!loaded) {

            obj.css({
                'position': 'absolute'
            });
            obj.css({
                'top': ($(window).height() - $('#code').height()) * 0.5,
                'left': left_position
            });
            $(window).bind('resize', function() {
                obj.center(!loaded);
            });
            $(window).bind('scroll', function() {
                obj.center(!loaded);
            });

        } else {
            obj.stop();
            obj.css({
                'position': 'absolute'
            });
            obj.animate({
                'top': top_position
            }, 200, 'linear');
        }
    }

})
</script>
</body>
</html>